<template>
  <div class="tech-table-container">
    <div v-if="loading" class="table-loading">
      <div class="loading-spinner"></div>
      <span>数据加载中...</span>
    </div>
    <el-table
      :data="processedData"
      @sort-change="handerSortChange"
      class="tech-table"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
    >
      <el-table-column prop="date" label="日期" sortable="custom" width="180" />
      <el-table-column prop="name" label="名称" width="180" sortable="custom" />
      <el-table-column prop="address" label="地址" />
    </el-table>

    <div v-if="!loading && processedData?.length === 0" class="table-empty">
      <div class="empty-icon">📊</div>
      <div class="empty-text">暂无数据</div>
    </div>
    <div class="tech-pagination">
      <el-pagination 
        layout="prev, pager, next" 
        :total="total" 
        :page-size="pageSize" 
        v-model:current-page="current_page"
        class="tech-pagination-content"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { PropType, ref, computed } from 'vue';

interface User {
  date: string 
  name: string
  address: string
}

const props = defineProps({
  tableData: {
    type: Array as PropType<User[]>,
    required: true
  },
  total: {
    type: Number,
    required: true
  },
  pageSize: {
    type: Number,
    default: 15
  }
});

// 添加loading状态
const loading = ref(false);

const current_page = defineModel<number>('current-page');
const tableOrder = ref<string>('');
const tableProp = ref<keyof User>('date');

// 科技风样式配置
const cellStyle = () => ({
  background: 'rgba(26, 34, 53, 0.8)',
  color: '#e2e8f0',
  borderBottom: '1px solid rgba(79, 172, 254, 0.2)',
  fontSize: '14px'
});

const headerCellStyle = () => ({
  background: 'rgba(10, 14, 23, 0.9)',
  color: '#00f2fe',
  borderBottom: '1px solid rgba(0, 242, 254, 0.3)',
  fontSize: '14px',
  fontWeight: '600'
});

const processedData = computed(() => {
  let result = [...props.tableData];
  if (tableOrder.value) result = __processedData__sortByField(result, tableProp.value, tableOrder.value);
  if(current_page.value) return __processedData__slice(result, current_page.value, props.pageSize);
});

const __processedData__slice = (arr, current_page: number, pageSize: number) => {
  let result = [...arr];
  let start = (current_page - 1) * pageSize;
  let end = (current_page - 1) * pageSize + pageSize;
  end = end < result.length ? end : result.length;
  return result.slice(start, end);
};

const __processedData__sortByField = (array, field, order = 'ascending', compareFn:(Function | null) = null) => {
  return [...array].sort((a, b) => {
    const getValue = (obj) => {
      if (typeof field === 'function') {
        return field(obj);
      }
      return field.split('.').reduce((acc, key) => acc?.[key], obj);
    };
    
    const valueA = getValue(a);
    const valueB = getValue(b);
    
    let result;
    if (compareFn) {
      result = compareFn(valueA, valueB);
    } else {
      result = __processedData__sortByField__defaultCompare(valueA, valueB);
    }
    
    return order === 'ascending' ? result : -result;
  });
};

const __processedData__sortByField__defaultCompare = (a, b) => {
  if (a == null && b == null) return 0;
  if (a == null) return -1;
  if (b == null) return 1;
  
  if (typeof a === 'string' && typeof b === 'string') {
    return a.localeCompare(b);
  }
  
  return a < b ? -1 : a > b ? 1 : 0;
};

const handerSortChange = ({ order, prop }) => {
  console.log(order, prop);
  current_page.value = 1;
  tableOrder.value = order;
  tableProp.value = prop;
};
</script>

<style lang="scss" scoped>
.tech-table-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .table-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #00f2fe;
    
    .loading-spinner {
      width: 30px;
      height: 30px;
      border: 2px solid rgba(0, 242, 254, 0.3);
      border-top: 2px solid #00f2fe;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 10px;
    }
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .tech-table {
    flex: 1;
    background: rgba(26, 34, 53, 0.8);
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-radius: 4px;
    
    :deep(.el-table__header) {
      background: rgba(10, 14, 23, 0.9);
      
      th {
        background: transparent;
      }
    }
    
    :deep(.el-table__body) {
      tr:hover > td {
        background: rgba(0, 242, 254, 0.1) !important;
      }
    }
    
    :deep(.el-table__inner-wrapper::before) {
      background: rgba(0, 242, 254, 0.3);
    }
  }

  .table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #94a3b8;
    
    .empty-icon {
      font-size: 48px;
      margin-bottom: 16px;
    }
    
    .empty-text {
      font-size: 16px;
    }
  }
  
  .tech-pagination {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    
    .tech-pagination-content {
      :deep(.btn-prev),
      :deep(.btn-next),
      :deep(.number) {
        background: rgba(26, 34, 53, 0.8);
        border: 1px solid rgba(0, 242, 254, 0.3);
        color: #e2e8f0;
        
        &:hover {
          background: rgba(0, 242, 254, 0.1);
          border-color: #00f2fe;
        }
      }
      
      :deep(.active) {
        background: #00f2fe;
        border-color: #00f2fe;
        color: #0a0e17;
        font-weight: bold;
      }
      
      :deep(.el-pager li:not(.active):hover) {
        color: #00f2fe;
      }
    }
  }
}
</style>